<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker datePicker into selects</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
			{
				
				// initialise the "Select date" link
				$('#date-pick')
					.datePicker(
						// associate the link with a date picker
						{
							createButton:false,
							startDate:'01/01/2005',
							endDate:'31/12/2010'
						}
					).bind(
						// when the link is clicked display the date picker
						'click',
						function()
						{
							updateSelects($(this).dpGetSelected()[0]);
							$(this).dpDisplay();
							return false;
						}
					).bind(
						// when a date is selected update the SELECTs
						'dateSelected',
						function(e, selectedDate, $td, state)
						{
							updateSelects(selectedDate);
						}
					).bind(
						'dpClosed',
						function(e, selected)
						{
							updateSelects(selected[0]);
						}
					);
					
				var updateSelects = function (selectedDate)
				{
					var selectedDate = new Date(selectedDate);
					$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
					$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
					$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
				}
				// listen for when the selects are changed and update the picker
				$('#d, #m, #y')
					.bind(
						'change',
						function()
						{
							var d = new Date(
										$('#y').val(),
										$('#m').val()-1,
										$('#d').val()
									);
							$('#date-pick').dpSetSelected(d.asString());
						}
					);
				
				// default the position of the selects to today
				var today = new Date();
				updateSelects(today.getTime());
				
				// and update the datePicker to reflect it...
				$('#d').trigger('change');
			});
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: datePicker into selects</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example displays how you can create a date picker and have the selected date parsed
				into seperate select elements. It also demonstrates how to update the selected date in the datePicker
				as the select elements are changed.
            </p>
			<form name="chooseDateForm" id="chooseDateForm" action="#">
				<fieldset>
					<legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="d">Date</label>
                            <select name="d" id="d" style="width: 170px">
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
								<option value="13">13</option>
								<option value="14">14</option>
								<option value="15">15</option>
								<option value="16">16</option>
								<option value="17">17</option>
								<option value="18">18</option>
								<option value="19">19</option>
								<option value="20">20</option>
								<option value="21">21</option>
								<option value="22">22</option>
								<option value="23">23</option>
								<option value="24">24</option>
								<option value="25">25</option>
								<option value="26">26</option>
								<option value="27">27</option>
								<option value="28">28</option>
								<option value="29">29</option>
								<option value="30">30</option>
								<option value="31">31</option>
							</select>
						</li>
                        <li>
                            <label for="m">Month:</label>
                            <select name="m" id="m" style="width: 170px">
								<option value="1">Jan</option>
								<option value="2">Feb</option>
								<option value="3">Mar</option>
								<option value="4">Apr</option>
								<option value="5">May</option>
								<option value="6">Jun</option>
								<option value="7">Jul</option>
								<option value="8">Aug</option>
								<option value="9">Sep</option>
								<option value="10">Oct</option>
								<option value="11">Nov</option>
								<option value="12">Dec</option>
							</select>
						</li>
                        <li>
                            <label for="y">Year:</label>
                            <select name="y" id="y" style="width: 170px">
                                <option value="2005">2005</option>
                                <option value="2006">2006</option>
                                <option value="2007">2007</option>
                                <option value="2008">2008</option>
                                <option value="2009">2009</option>
                                <option value="2010">2010</option>
                            </select>
                        </li>
						<li>
							<a href="noJs.html" id="date-pick">Select date</a>
						</li>
					</ol>
				</fieldset>
			</form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">$(function()
{
	
	// initialise the "Select date" link
	$('#date-pick')
		.datePicker(
			// associate the link with a date picker
			{
				createButton:false,
				startDate:'01/01/2005',
				endDate:'31/12/2010'
			}
		).bind(
			// when the link is clicked display the date picker
			'click',
			function()
			{
				updateSelects($(this).dpGetSelected()[0]);
				$(this).dpDisplay();
				return false;
			}
		).bind(
			// when a date is selected update the SELECTs
			'dateSelected',
			function(e, selectedDate, $td, state)
			{
				updateSelects(selectedDate);
			}
		).bind(
			'dpClosed',
			function(e, selected)
			{
				updateSelects(selected[0]);
			}
		);
		
	var updateSelects = function (selectedDate)
	{
		var selectedDate = new Date(selectedDate);
		$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
		$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
		$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
	}
	// listen for when the selects are changed and update the picker
	$('#d, #m, #y')
		.bind(
			'change',
			function()
			{
				var d = new Date(
							$('#y').val(),
							$('#m').val()-1,
							$('#d').val()
						);
				$('#date-pick').dpSetSelected(d.asString());
			}
		);
	
	// default the position of the selects to today
	var today = new Date();
	updateSelects(today.getTime());
	
	// and update the datePicker to reflect it...
	$('#d').trigger('change');
});</pre>
        </div>
	</body>
</html>